import React, {useState} from "react";
import {HeartFilled, HeartOutlined} from "@ant-design/icons";
import "./index.less"

type Props = {
  defaultLiked?: boolean;
  onLikeChange?: (liked: boolean) => void;
  size?:number
}

export const Favorite: React.FC<Props> = (props ) => {

  const {defaultLiked,onLikeChange,size} = props
  const [liked, setLiked] = useState(defaultLiked);
  const [animating, setAnimating] = useState(false);

  const handleClick =async () => {
    const newLikedState = !liked;
    setLiked(newLikedState);
    setAnimating(true);

    // 触发回调
    onLikeChange?.(newLikedState);
    setTimeout(() => setAnimating(false), 300);
  };
  return (
    <span
      onClick={handleClick}
      style={{
        cursor: 'pointer',
        display: 'inline-block',
        transition: 'transform 0.2s ease-in-out',
        transform: animating ? 'scale(1.3)' : 'scale(1)',
      }}
    >
      {liked ? (
        <HeartFilled
          style={{
            color: 'hotpink',
            fontSize: size||20,
            marginLeft: 8,
            animation: animating ? 'heartBeat 0.3s ease-in-out' : 'none',
          }}
        />
      ) : (
        <HeartOutlined
          style={{
            color: 'hotpink',
            fontSize: size||20,
            marginLeft: 8,
          }}
        />
      )}
    </span>
  );
}



